<template>
	<div class="maps">
		<div class="selectMap" v-if="$route.path !== '/complain'">
			<el-select v-model="value" class="m-2" placeholder="运营数据">
				<el-option
				v-for="item in seValue"
				:key="item.value"
				:label="item.label"
				:value="item.value"
				/>
			</el-select>
		</div>
		<!-- <div class="echrtsMap"></div> -->
		<div
		:class="eChart"
		:style="`width: 100%; height:100%;zoom:${zoom};transform:scale(${
        1 / zoom
      });transform-origin:0 0`"
		></div>
	</div>
</template>
<script setup>
  import * as echarts from "echarts"; // echarts@v5.2.2
  import echartGL from "echarts-gl"; // echarts-gl@v2.0.8
  import {
    ref,
    reactive,
    defineProps,
    onMounted,
    watch,
    toRefs,
    computed,
  } from "vue";
  import {timestampToDate} from "../utils/common";
  import {getComplainInfo, getSatisfyInfo} from "../api/main"; //封装的请求

  const props = defineProps({
    list: {
      type: Array,
    },
  });

  let zoom = ref(""); //缩放还原初始值

  const eChart = ref("eChart" + Date.now() + Math.random()); //动态切换盒子

  const {list} = toRefs(props);
  console.log("list00", list.value);
  // 是视觉映射组件
  const visualMap = [
    {
      type: "continuous", // 连续型视觉映射组件
      show: false, // 是否显示 visualMap-continuous 组件
      seriesIndex: 0, // 指定取哪个系列的数据
      text: ["High", "Low"], // 两端的文本
      calculable: true, // 是否显示拖拽用的手柄
      max: 4000, // 指定 visualMapContinuous 组件的允许的最大值
      // 定义 在选中范围中 的视觉元素
      inRange: {
        color: ["#87aa66", "#eba438", "#d94d4c"], // 图元的颜色的集合
      },
    },
  ];

  // 用于鼠标的旋转，缩放等视角控制
  const viewControl = {
    rotateSensitivity: 0, // 旋转操作的灵敏度，值越大越灵敏。支持使用数组分别设置横向和纵向的旋转灵敏度。
    zoomSensitivity: 0, // 缩放操作的灵敏度，值越大越灵敏。
    panSensitivity: 0, // 平移操作的灵敏度，值越大越灵敏。支持使用数组分别设置横向和纵向的平移灵敏度
    projection: "perspective", // 透视投影
    autoRotate: false, // 是否开启视角绕物体的自动旋转查看
    autoRotateDirection: "cw", // 物体自转的方向: 从上往下看是顺时针方向
    autoRotateSpeed: 10, // 物体自转的速度: 角度 / 秒
    autoRotateAfterStill: 3, // 在鼠标静止操作后恢复自动旋转的时间间隔.在开启 autoRotate 后有效
    damping: 0.8, // 鼠标进行旋转，缩放等操作时的迟滞因子，在大于 0 的时候鼠标在停止操作后，视角仍会因为一定的惯性继续运动（旋转和缩放）。
    // panMouseButton: 'left',     // 平移操作使用的鼠标按键
    // rotateMouseButton: 'middle', // 旋转操作使用的鼠标按键
    // distance: 100,              // 默认视角距离主体的距离，在 projection 为'perspective'的时候有效。
    // minDistance: 40,            // 视角通过鼠标控制能拉近到主体的最小距离。
    // maxDistance: 400,           // 视角通过鼠标控制能拉远到主体的最大距离
    // orthographicSize: 100,      // 正交投影的大小。 projection 为'orthographic'的时候有效。
    // maxOrthographicSize: 20,    // 正交投影缩放的最大值。 projection 为'orthographic'的时候有效。
    // minOrthographicSize: 400,   // 正交投影缩放的最小值。 projection 为'orthographic'的时候有效。
    // alpha: 4,                   // 视角绕 x 轴，即上下旋转的角度。配合 beta 可以控制视角的方向。
    // minAlpha: 5,                // 上下旋转的最小 alpha 值。即视角能旋转到达最上面的角度。
    // maxAlpha: 90,               // 上下旋转的最大 alpha 值。即视角能旋转到达最下面的角度。
    // beta: 4,                    // 视角绕 y 轴，即左右旋转的角度。
    // minBeta: -80,               // 左右旋转的最小 beta 值。即视角能旋转到达最左的角度。
    // maxBeta: 80,                // 左右旋转的最大 beta 值。即视角能旋转到达最右的角度。
    // center: [0,0,0],            // 视角中心点，旋转也会围绕这个中心点旋转
    animation: true, // 是否开启动画。
    animationDurationUpdate: 1000, // 过渡动画的时长。
    animationEasingUpdate: "cubicInOut", // 过渡动画的缓动效果。
  };

  const label = {
    show: true, // 是否显示市
    borderWidth: 0, // 文字的描边宽度。
    borderColor: "#ffffff", // 文字的描边颜色。
    color: "#ffffff", // 文字颜色
    fontSize: 10, // 文字大小
    fontFamily: "sans-serif", // 文字的字体系列。
    fontWeight: "normal", // 文字字体的粗细。
  };

  const itemStyle = {
    opacity: 1,
    color: "#488DF1", // 地图颜色
    borderWidth: 1, // 分界线wdith
    borderColor: "#6BECF5", // 分界线颜色
  };

  const emphasis = {
    //鼠标经过高亮显示
    label: {
      show: true, // 是否显示高亮
      color: "#ffffff", // 高亮文字颜色
      fontSize: 16, // 文字的字体大小
      // formatter: (params) => {
      //   if (mapData.length > 0) {
      //     mapData.map((item) => {
      //       if (item.name === params.name) {
      //         this.transData.orgNo = item.orgNo;
      //         this.transData.name = item.name;
      //         this.transData.value = item.value;
      //       }
      //     });
      //   }
      //   const name = params.name;
      //   return `${name}`;
      // },
    },
    itemStyle: {
      color: "#37B8E0", // 地图高亮颜色
      // borderColor: "red",
      // borderWidth: 4,
    },
  };

  const select = {
    label: {
      show: true, // 是否显示高亮
      color: "#ffffff", // 高亮文字颜色
      fontSize: 16, // 文字的字体大小
    },
    itemStyle: {
      color: "red", // 地图高亮颜色
      areaColor: "yellow",
      borderColor: "#f18355",
      borderWidth: "3",
    },
  };

  const light = {
    // 场景主光源的设置
    main: {
      color: "#fff", // 主光源的颜色
      intensity: 1.2, // 主光源的强度
      shadow: false, // 主光源是否投射阴影
      shadowQuality: "high", // 阴影的质量
      alpha: 55, // 主光源绕 x 轴，即上下旋转的角度
      beta: 10, // 主光源绕 y 轴，即左右旋转的角度
    },
    // 全局的环境光设置
    ambient: {
      color: "#fff", // 环境光的颜色
      intensity: 0.3, // 环境光的强度
    },
  };

  // const geo = {
  //   type: "map3D", //地图属性
  //   map: "湖北", // 地图类型。
  //   roam: false, // 是否允许缩放
  //   boxDepth: 90, // 三维地理坐标系组件在三维场景中的深度
  //   viewControl, // 用于鼠标的旋转，缩放等视角控制
  //   label, // 标签的相关设置。
  //   itemStyle, // 三维地理坐标系组件 中三维图形的视觉属性，包括颜色，透明度，描边等
  //   emphasis, // 鼠标 hover 高亮时图形和标签的样式。
  //   light, // 光照相关的设置。
  //   select,
  //   data: [

  //   ],
  // };

  const geo = {
    type: "map3D", //地图属性
    name: "湖北", //名称
    map: "湖北", // 地图类型。
    boxDepth: 90, // 地图倾斜度
    viewControl, // 用于鼠标的旋转，缩放等视角控制
    label, // 标签的相关设置。
    itemStyle, // 三维地理坐标系组件 中三维图形的视觉属性，包括颜色，透明度，描边等
    emphasis, // 鼠标 hover 高亮时图形和标签的样式。
    light, // 光照相关的设置。
    boxWidth: 90,
    boxHeight: 1,
    regionHeight: 5, // 地图高度
    top: -10,
    left: 0,
    shading: "realistic", // 真实渲染引擎 有光照效果
    // 材质贴图 配置
    realisticMaterial: {
      // detailTexture: this.bg,
      // detailTexture: 'assets/img/map2.png'
      // metalness: 1,
      // roughness: 1
    },
    temporalSuperSampling: {
      //选中地图抖动效果
      enable: false,
    },
    // data: [
    //   { name: "宜昌", value: [111.290843, 30.702636, 600] },
    //   { name: "孝感市	", value: [113.926655, 30.926423, 200] },
    //   { name: "十堰市	", value: [110.787916, 32.646907, 100] },
    //   { name: "荆门市	", value: [112.204251, 31.03542, 150] },
    //   { name: "仙桃市	", value: [113.453974, 30.364953, 350] },
    // ],
  };
  var mychartLife;
  var flag = false;
  var cityName = ref("");
  const tooltip = {
    //状态栏
    // 鼠标是否可以进入悬浮框
    enterable: true,
    // 触发方式 mousemove, click, none, mousemove|click
    triggerOn: `click`,
    // item 图形触发， axis 坐标轴触发， none 不触发
    trigger: `item`,
    margin: 0,
    padding: 0,
    // 浮层隐藏的延迟
    hideDelay: 300,
    // 背景色
    // backgroundColor: `rgba(0,0,0,0)`,
    backgroundColor: `rgba(17, 21, 32, 0.7)`,
    textStyle: {
      color: "#ffffff",
    },
    // formatter: function (params) {
    //   return `<div class=chartLabel>
    //             <div class=title>${params.name}</div>
    //             <div class=label>到达时间：2020.10.11</div>
    //           </div>`;
    // },
    // formatter: function (params) {
    //   return params.name;
    // },
  };

  function getDom(params) {
    cityName = params.name;
    // console.log('getDom params',params.name)
    // console.log('cityName',cityName)

    const newDom = `<div class="chartLabel" style=" background:rgba(17, 21, 32, 0.7); width: 423px; height: 275px;position: absolute;
      top: 25%;left: 25%;display: flex;flex-direction: column;padding-bottom:5px">
      <div class="labelChart" style="width: 423px; height: 170px;"></div>
      </div>`;
    const newDom1 =
      `<div class="chartTab" style="width:423px;display: flex;flex-direction: column;align-items: center;">
      <div style="height: 47px;font-size: 14px;font-weight: 400;color: #E6E6E6;line-height: 47px;width:100%;text-align:center;position: relative;">
      <div class="changeChart" style="width: 79px;height: 22px;background: rgba(192, 217, 255, 0.2);border-radius: 2px 2px 2px 2px;opacity: 1;font-size: 12px;color: #CDCDCD;
      position: absolute;line-height: 22px;top: 12px;left: 12px;cursor: pointer;">查看工单率</div>` +
      params.name +
      `投诉满意率详情
      <div class="chartClose" style="cursor:pointer;position:absolute;top:0;right:12px">X</div>
      </div>
      <div class="modioLineChart" style="display: flex;align-items: center;justify-content: space-evenly;width:100%;margin-top:8px;margin-bottom:10px">
<!--      <div id="satisfyRate" class="chartButton choice" style="cursor: pointer;width: 55px;height: 22px;border-radius: 2px 2px 2px 2px;opacity: 1;border: 1px solid #BDBDBD;font-size: 12px;color: #CDCDCD;line-height: 22px;text-align: center;">满意率</div>-->
<!--      <div id="today" class="chartButton " style="cursor: pointer;width: 67px;height: 22px;border-radius: 2px 2px 2px 2px;opacity: 1;border: 1px solid rgba(20, 158, 236, 0.8);font-size: 12px;color: #149EEC;line-height: 22px;text-align: center;">当天测评</div>-->
      <div id="satisfyRate" class="chartButton choice" style="cursor: pointer;width: 67px;height: 22px;border-radius: 2px 2px 2px 2px;opacity: 1;border: 1px solid rgba(20, 158, 236, 0.8);font-size: 12px;color: #149EEC;line-height: 22px;text-align: center;">满意率</div>
      <div id="today" class="chartButton " style="cursor: pointer;width: 55px;height: 22px;border-radius: 2px 2px 2px 2px;opacity: 1;border: 1px solid #BDBDBD;font-size: 12px;color: #CDCDCD;line-height: 22px;text-align: center;">当天测评</div>
      <div id="together" class="chartButton " style="cursor: pointer;width: 67px;height: 22px;border-radius: 2px 2px 2px 2px;opacity: 1;border: 1px solid #BDBDBD;font-size: 12px;color: #CDCDCD;line-height: 22px;text-align: center;">集中处理</div>
      <div id="branch" class="chartButton" style="cursor: pointer;width: 79px;height: 22px;border-radius: 2px 2px 2px 2px;opacity: 1;border: 1px solid #BDBDBD;font-size: 12px;color: #CDCDCD;line-height: 22px;text-align: center;">分公司处理</div>
      <div id="total" class="chartButton" style="cursor: pointer;width: 43px;height: 22px;border-radius: 2px 2px 2px 2px;opacity: 1;border: 1px solid #BDBDBD;font-size: 12px;color: #CDCDCD;line-height: 22px;text-align: center;">合计</div>

      </div>
      <div class="lastoptionChart" style="display: none;align-items: center;justify-content: flex-start;width:92%;margin-top:8px;margin-bottom:10px">
      <div class="lastoptionChartBt choices" id="rightCentenOption" style="cursor: pointer;height: 22px;border-radius: 2px 2px 2px 2px;opacity: 1;border: 1px solid rgba(20, 158, 236, 0.8);font-size: 12px;color: #149EEC;line-height: 22px;text-align: center;margin-right:20px;padding: 0 10px">详情趋势</div>
      <div class="lastoptionChartBt" id="lastoption" style="cursor: pointer;height: 22px;border-radius: 2px 2px 2px 2px;opacity: 1;border: 1px solid #BDBDBD;font-size: 12px;color: #CDCDCD;line-height: 22px;text-align: center;padding: 0 10px">序值定比</div>
      </div>
      </div>`;

    // console.log("map params", params.name, params);
    // lastoptionChartTab()

    calcAll(newDom, newDom1);
  }

  const closeChart = function () {
    document.getElementsByClassName("chartClose")[0].onclick = function () {
      document.getElementsByClassName("chartLabel")[0].remove();
      flag = false;
    };
  };

  function createNode(txt) {
    //模板字符串转为node节点
    const template = `${txt}`;
    let tempNode = document.createElement("div");
    tempNode.innerHTML = template;
    return tempNode.firstChild;
  }

  function calcAll(newDom, newDom1) {
    // console.log('newDom1',newDom1)
    if (!document.getElementsByClassName("chartLabel")[0]) {
      // document
      //   .getElementsByClassName("echrtsMap")[0]
      //   .appendChild(createNode(newDom));
      document
        .getElementsByClassName(eChart.value)[0]
        .appendChild(createNode(newDom));
    }

    const echrtsMapDom = document.getElementsByClassName("chartLabel")[0];
    const echartDom = document.getElementsByClassName("labelChart")[0];

    if (mychartLife != null && mychartLife != "" && mychartLife != undefined) {
      mychartLife.dispose(); //销毁
    }
    if (!document.getElementsByClassName("chartTab")[0]) {
      echrtsMapDom.insertBefore(createNode(newDom1), echartDom);
    } else {
      echrtsMapDom.removeChild(document.getElementsByClassName("chartTab")[0]);
      echrtsMapDom.insertBefore(createNode(newDom1), echartDom);
    }
    console.log("begin.value", begin.value);
    getPageData({beginCDate: begin.value, endCDate: end.value});
    mychartLife = echarts.init(echartDom);
    // mychartLife.setOption(modioLine);
    tabChange();
    closeChart();
    chartChange();
    lastoptionChartTab();
    return cityName;
  }

  const citySatisfy = reactive([{name: "武汉市", data: []}]);

  function getSatisfyRank(data, key) {
    if (data && data.length > 0) {
      delete data[0];
      data.sort((a, b) => {
        let v1 = a[key];
        let v2 = b[key];
        if (v1 === null) {
          return 1;
        } else {
          if (v1 > v2) {
            return -1;
          } else if (v1 < v2) {
            return 1;
          } else {
            return 0;
          }
        }
      });
      console.log("sort", data);
      return data;
    }
  }

  const satisfyRateData = reactive({
    today: {
      // satisfy: ["-", 20, 31, 32, 28, 27, 32, 10, 26],
      // noSatisfy: ["-", 25, 31, 32, 28, 27, 32, 33, 26],
      // general: ["-", 27, 1, 12, 7, 17, 12, 40, 36],
      satisfy: [],
      noSatisfy: [],
      general: [],
    },
    together: {
      satisfy: ["-", 5, 31, 32, 2, 27, 12, 33, 6],
      noSatisfy: ["-", 26, 39, 32, 28, 27, 32, 33, 26],
      general: ["-", 7, 1, 12, 7, 17, 12, 40, 36],
    },
    branch: {
      satisfy: ["-", 5, 31, 32, 2, 27, 12, 33, 6],
      noSatisfy: ["-", 26, 39, 32, 28, 27, 32, 33, 26],
      general: ["-", 7, 1, 12, 7, 17, 12, 40, 36],
    },
    total: {
      satisfy: ["-", 5, 31, 32, 2, 27, 12, 33, 6],
      noSatisfy: ["-", 26, 39, 32, 28, 27, 32, 33, 26],
      general: ["-", 7, 1, 12, 7, 17, 12, 40, 36],
    },
    satisfyRate: [],
  });
  //点击弹出框echarts图表
  // const modioLine = ref({
  const modioLine = reactive({
    legend: {
      data: [
        {
          name: "满意",
          icon: "path://M700.416 686.592c-68.608 0-131.072-43.008-185.856-128C442.368 448 369.152 394.24 297.472 398.848c-111.104 7.168-206.336 155.648-233.984 212.48l-55.296-26.624c4.608-9.728 115.712-236.544 285.184-247.296C389.12 331.264 480.768 394.24 565.76 525.312c45.056 69.632 92.672 102.912 141.824 99.328 110.08-7.68 219.648-193.024 252.928-263.68l55.808 26.112c-5.632 11.776-135.68 287.232-304.128 299.008-4.096 0.512-8.192 0.512-11.776 0.512z",
        },
        {
          name: "不满意",
          icon: "path://M700.416 686.592c-68.608 0-131.072-43.008-185.856-128C442.368 448 369.152 394.24 297.472 398.848c-111.104 7.168-206.336 155.648-233.984 212.48l-55.296-26.624c4.608-9.728 115.712-236.544 285.184-247.296C389.12 331.264 480.768 394.24 565.76 525.312c45.056 69.632 92.672 102.912 141.824 99.328 110.08-7.68 219.648-193.024 252.928-263.68l55.808 26.112c-5.632 11.776-135.68 287.232-304.128 299.008-4.096 0.512-8.192 0.512-11.776 0.512z",
        },
        {
          name: "一般",
          icon: "path://M700.416 686.592c-68.608 0-131.072-43.008-185.856-128C442.368 448 369.152 394.24 297.472 398.848c-111.104 7.168-206.336 155.648-233.984 212.48l-55.296-26.624c4.608-9.728 115.712-236.544 285.184-247.296C389.12 331.264 480.768 394.24 565.76 525.312c45.056 69.632 92.672 102.912 141.824 99.328 110.08-7.68 219.648-193.024 252.928-263.68l55.808 26.112c-5.632 11.776-135.68 287.232-304.128 299.008-4.096 0.512-8.192 0.512-11.776 0.512z",
        },
      ],
      textStyle: {
        color: "rgba(142, 147, 154, 1)",
      },
      // top: 15,
    },
    grid: {
      left: "3%",
      right: "3%",
      top: "20%",
      bottom: "0%",
      containLabel: true,
      // y2:20,
      // x2:50,
      // x:50,
      // y:20
    },
    xAxis: {
      name: "日期",
      type: "category",
      // data: ["", "1号", "2号", "3号", "4号", "5号", "6号", "8号", "10号", ""],
      boundaryGap: false,
      axisTick: {
        show: true,
        alignWithLabel: true,
      },
      axisLine: {
        show: false,
        onZero: true,
        lineStyle: {
          color: "rgba(255,255,255,0.2)",
          type: "dashed",
        },
      },
      axisLabel: {
        color: "rgba(142, 147, 154, 1)",
        fontSize: 12,
      },
      splitLine: {
        show: true,
        lineStyle: {
          color: "rgba(255,255,255,0.2)",
          type: "dashed",
        },
      },
    },
    yAxis: {
      type: "value",
      name: "人数",
      // data: ["0", "10", "20", "30", "40"],
      // interval: 10,
      // max: 40,
      min: function (value) {
        return Math.floor(value.min);
      },
      max: function (value) {
        return Math.round(value.max) + 1;
      },
      nameTextStyle: {
        color: "rgba(142, 147, 154, 1)",
        fontSize: 12,
        align: "right",
      },
      axisLine: {
        show: true,
        onZero: true,
        lineStyle: {
          color: "rgba(255,255,255,0.2)",
          type: "dashed",
          width: 0,
        },
      },
      axisTick: {
        // show : true,
        alignWithLabel: true,
        lineStyle: {
          color: "rgba(255,255,255,0.2)",
          type: "dashed",
        },
      },
      axisLabel: {
        color: "rgba(142, 147, 154, 1)",
        fontSize: 12,
      },
      splitLine: {
        show: true,
        lineStyle: {
          color: "rgba(255,255,255,0.2)",
          type: "dashed",
        },
      },
    },
    series: [
      {
        // data: ["-", 25, 31, 32, 28, 27, 32, 33, 26],
        data: satisfyRateData.today.satisfy,
        name: "满意",
        type: "line",
        smooth: true,
        symbol: "circle",
        symbolSize: 7,
        label: {
          show: true,
          position: "top",
          color: "rgba(186, 198, 204, 1)",
        },
        lineStyle: {
          color: "#E56137",
        },
        itemStyle: {
          color: "#E56137",
          borderType: "solid",
          shadowColor: "#E56137",
          shadowBlur: 10,
        },
      },
      {
        // data: ["-", 13, 12, 5, 6, 16, 18, 9, 16],
        data: satisfyRateData.today.noSatisfy,
        name: "不满意",
        type: "line",
        smooth: true,
        symbol: "circle",
        symbolSize: 7,
        label: {
          show: true,
          position: "top",
          color: "rgba(186, 198, 204, 1)",
        },
        lineStyle: {
          color: "#06D9CC",
        },
        itemStyle: {
          color: "#06D9CC",
          borderType: "solid",
          shadowColor: "#06D9CC",
          shadowBlur: 10,
        },
      },
      {
        // data: ["-", 8, 17, 19, 14, 12, 21, 21, 23],
        data: satisfyRateData.today.general,
        name: "一般",
        type: "line",
        smooth: true,
        symbol: "circle",
        symbolSize: 7,
        label: {
          show: true,
          position: "top",
          color: "rgba(186, 198, 204, 1)",
        },
        lineStyle: {
          color: "#069BD9",
        },
        itemStyle: {
          color: "#069BD9",
          borderType: "solid",
          shadowColor: "#069BD9",
          shadowBlur: 10,
        },
      },
    ],
  });

  //全省投诉工单趋势图
  const rightCentenOption = reactive({
    legend: {
      data: [
        {
          name: "基准值",
          icon: "path://M700.416 686.592c-68.608 0-131.072-43.008-185.856-128C442.368 448 369.152 394.24 297.472 398.848c-111.104 7.168-206.336 155.648-233.984 212.48l-55.296-26.624c4.608-9.728 115.712-236.544 285.184-247.296C389.12 331.264 480.768 394.24 565.76 525.312c45.056 69.632 92.672 102.912 141.824 99.328 110.08-7.68 219.648-193.024 252.928-263.68l55.808 26.112c-5.632 11.776-135.68 287.232-304.128 299.008-4.096 0.512-8.192 0.512-11.776 0.512z",
        },
        {
          name: "目标值",
          icon: "path://M700.416 686.592c-68.608 0-131.072-43.008-185.856-128C442.368 448 369.152 394.24 297.472 398.848c-111.104 7.168-206.336 155.648-233.984 212.48l-55.296-26.624c4.608-9.728 115.712-236.544 285.184-247.296C389.12 331.264 480.768 394.24 565.76 525.312c45.056 69.632 92.672 102.912 141.824 99.328 110.08-7.68 219.648-193.024 252.928-263.68l55.808 26.112c-5.632 11.776-135.68 287.232-304.128 299.008-4.096 0.512-8.192 0.512-11.776 0.512z",
        },
        {
          name: "截止日期完成值",
          icon: "path://M700.416 686.592c-68.608 0-131.072-43.008-185.856-128C442.368 448 369.152 394.24 297.472 398.848c-111.104 7.168-206.336 155.648-233.984 212.48l-55.296-26.624c4.608-9.728 115.712-236.544 285.184-247.296C389.12 331.264 480.768 394.24 565.76 525.312c45.056 69.632 92.672 102.912 141.824 99.328 110.08-7.68 219.648-193.024 252.928-263.68l55.808 26.112c-5.632 11.776-135.68 287.232-304.128 299.008-4.096 0.512-8.192 0.512-11.776 0.512z",
        },
      ],
      textStyle: {
        color: "rgba(142, 147, 154, 1)",
      },
      top: 0,
    },
    grid: {
      // left: "0%",
      left: "3%",
      right: "3%",
      top: "20%",
      bottom: "0%",
      containLabel: true,
    },
    xAxis: {
      name: "日期",
      type: "category",
      data: ["", "1号", "2号", "3号", "4号", "5号", "6号", "7号", "8号", ""],
      boundaryGap: false,
      axisTick: {
        show: true,
        alignWithLabel: true,
      },
      axisLine: {
        show: false,
        onZero: true,
        lineStyle: {
          color: "rgba(255,255,255,0.2)",
          type: "dashed",
        },
      },
      axisLabel: {
        color: "rgba(142, 147, 154, 1)",
        fontSize: 12,
      },
      splitLine: {
        show: true,
        lineStyle: {
          color: "rgba(255,255,255,0.2)",
          type: "dashed",
        },
      },
    },
    yAxis: {
      type: "value",
      min: function (value) {
        return Math.floor(value.min);
      },
      max: function (value) {
        return Math.round(value.max) + 1;
      },
      name: "件/万户",
      // data: ["0", "10", "20", "30", "40"],
      // interval:10,
      // max:40,
      nameTextStyle: {
        color: "rgba(142, 147, 154, 1)",
        fontSize: 12,
        // align:'right'
      },
      axisLine: {
        show: true,
        onZero: true,
        lineStyle: {
          color: "rgba(255,255,255,0.2)",
          type: "dashed",
          width: 0,
        },
      },
      axisTick: {
        // show : true,
        alignWithLabel: true,
        lineStyle: {
          color: "rgba(255,255,255,0.2)",
          type: "dashed",
        },
      },
      axisLabel: {
        color: "rgba(142, 147, 154, 1)",
        fontSize: 12,
      },
      splitLine: {
        show: true,
        lineStyle: {
          color: "rgba(255,255,255,0.2)",
          type: "dashed",
        },
      },
    },
    series: [
      {
        data: ["-", 7.27, 4.01, 8.41, 8.87, 4.87, 6.56, 5.33, 8.82],
        name: "基准值",
        type: "line",
        smooth: true,
        symbol: "circle",
        symbolSize: 7,
        label: {
          show: true,
          position: "top",
          color: "rgba(186, 198, 204, 1)",
        },
        lineStyle: {
          color: "#E56137",
        },
        itemStyle: {
          color: "#E56137",
          borderType: "solid",
          shadowColor: "#E56137",
          shadowBlur: 10,
        },
      },
      {
        data: [
          "-",
          5.09,
          2.8,
          5.89,
          6.21,
          3.41,
          4.59,
          3.73,
          6.17,
          4.72,
          10.65,
          4.41,
          5.2,
          6.86,
          5.89,
        ],
        name: "目标值",
        type: "line",
        smooth: true,
        symbol: "circle",
        symbolSize: 7,
        label: {
          show: true,
          position: "top",
          color: "rgba(186, 198, 204, 1)",
        },
        lineStyle: {
          color: "#06D9CC",
        },
        itemStyle: {
          color: "#06D9CC",
          borderType: "solid",
          shadowColor: "#06D9CC",
          shadowBlur: 10,
        },
      },
      {
        data: [
          "-",
          5.26,
          2.45,
          5.4,
          6.09,
          3.7,
          4.11,
          3.49,
          4.11,
          4.84,
          9.08,
          4.4,
          4.16,
          6.16,
          5.62,
        ],
        name: "截止日期完成值",
        type: "line",
        smooth: true,
        symbol: "circle",
        symbolSize: 7,
        label: {
          show: true,
          position: "top",
          color: "rgba(186, 198, 204, 1)",
        },
        lineStyle: {
          color: "#069BD9",
        },
        itemStyle: {
          color: "#069BD9",
          borderType: "solid",
          shadowColor: "#069BD9",
          shadowBlur: 10,
        },
      },
    ],
  });

  //全省序值定比投诉工单率趋势图
  const lastoption = reactive({
    tooltip: {
      trigger: "axis",
      axisPointer: {
        // 坐标轴指示器，坐标轴触发有效
        type: "line", // 默认为直线，可选为：'line' | 'shadow'
      },
    },
    grid: {
      left: "3%",
      right: "3%",
      top: "20%",
      bottom: "0%",
      containLabel: true,
    },

    xAxis: [
      {
        type: "category",
        name: "日期",
        data: ["", "1号", "2号", "3号", "4号", "5号", "6号", "7号", "8号", ""],
        axisLabel: {
          //y轴文字的配置
          textStyle: {
            fontSize: 12,
            color: "rgba(142, 147, 154, 1)",
          },
        },
        boundaryGap: false,
        axisTick: {
          show: true,
          alignWithLabel: true,
        },
        axisLine: {
          show: true,
          onZero: false,
          lineStyle: {
            color: "rgba(255,255,255,0.2)",
            type: "dashed",
          },
        },
        splitLine: {
          show: true,
          lineStyle: {
            color: "rgba(255,255,255,0.2)",
            type: "dashed",
          },
        },
      },
    ],
    yAxis: [
      {
        type: "value",
        name: "序值定比(%)",
        nameLocation: "end",
        min: function (value) {
          return Math.floor(value.min);
        },
        max: function (value) {
          return Math.round(value.max) + 1;
        },
        axisLabel: {
          //y轴文字的配置
          textStyle: {
            color: "rgba(142, 147, 154, 1)",
            margin: 15,
            fontSize: 12,
          },
        },
        axisLine: {
          //y轴线的颜色以及宽度
          show: true,
          lineStyle: {
            color: "rgba(255, 255, 255, 0.2)",
            width: 1,
            type: "dashed",
          },
        },
        // data:['-40','-20','0','20','40','60'],

        splitLine: {
          //x轴虚线设置
          show: true,
          lineStyle: {
            type: "dashed",
            color: "rgba(255, 255, 255, 0.2)",
          },
        },
      },
    ],
    series: {
      name: "投诉工单率",
      type: "line",
      smooth: true,
      label: {
        show: true,
        position: "top",
        color: "rgba(255, 255, 255, 1)",
        fontSize: 12,
      },
      lineStyle: {
        color: "rgba(0, 163, 255, 1)",
      },
      itemStyle: {
        color: "rgba(0, 163, 255, 1)",
        borderType: "solid",
        shadowColor: "rgba(0, 163, 255, 0.6)",
        shadowBlur: 10,
        normal: {
          color: "rgba(237, 61, 59, 0.6)",
        },
      },
      symbol: "circle",
      symbolSize: 7,
      barWidth: "15", //设置柱状图宽度
      data: ["", "", "", "", ""],
      areaStyle: {
        origin: "start",
        color: {
          type: "linear",
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [
            {
              offset: 0,
              color: "rgba(2, 138, 214, 0.6)",
            },
            {
              offset: 1,
              color: "rgba(2, 138, 214, 0.02)",
            },
          ],
        },
        global: false, // 缺省为 false
      },
    },
  });

  // 最近的8天日期arr顺序
  function getRecentData(arr) {
    arr.unshift(" ");
    arr.push(" ");
    // return arr.reverse()
    return arr;
  } // 最近的8天日期arr顺序
  function getDetailData(arr) {
    arr.unshift("");
    arr.push("");
    arr.push("");
    return arr.reverse();
  }

  function getDetailSa(arr) {
    arr.unshift("");
    arr.push("");
    return arr.reverse();
  }

  import {useStore} from "vuex";

  const store = useStore();
  // console.log('useStore.complainDate',store.state.complainDate)

  const getComplainDate = computed(() => {
    return store.state.complain.complainDate;
  });

  const begin = ref("");
  const end = ref("");
  // 监听选择日期的变化
  watch(
    getComplainDate,
    (newVal) => {
      // 重新请求
      // getPageData({ beginCDate: newVal, endCDate: newVal });
      begin.value = addDate(new Date(newVal), -7);
      end.value = newVal;
      // getDom(addDate(new Date(newVal), -7),newVal)
    },
    {immediate: true, deep: true}
  );

  // 分数转百分比
  function toPercent(point) {
    let percent = Number(point * 100).toFixed(2);
    percent += "%";
    return percent;
  }

  /**
   * 日期加减
   * @param date 被加或减的日期
   * @param days 需要加或减的数字
   * @returns {string}
   */

  function addDate(date, days) {
    let d = new Date(date);
    d.setDate(d.getDate() + days);
    let m = d.getMonth() + 1;
    return d.getFullYear() + "-" + m + "-" + d.getDate() + " 00:00:00";
  }

  function getPageData(date) {
    getSatisfyInfo({beginCDate: date.beginCDate, endCDate: date.endCDate}).then(
      (r) => {
        if (r.code === 0) {
          if (r.data.length > 0) {
            let tempData = getSatisfyRank(r.data, "cdate");
            getDetailSatisfy(tempData);
            // 投诉满意率趋势数据
            //  mychartLife = echarts.init(echartDom);
            mychartLife.setOption(modioLine);
          } else {
            clearData();
          }
        } else {
          clearData();
        }
      }
    );
    getComplainInfo({
      beginCDate: date.beginCDate,
      endCDate: date.endCDate,
    }).then((r) => {
      if (r.code === 0) {
        if (r.data.length > 0) {
          // // 投诉工单率趋势数据
          // getComplainInfo({beginCDate:beginDate,endCDate:date.endCDate}).then( res => {
          //   if(res.data && res.data.length>0){
          getProvinceComplainTrend(r.data);
          console.log("date.p", date.p);
          // mychartLife.setOption(date.p);
          //   }
          // });
        } else {
          clearData();
        }
      } else {
        clearData();
      }
    });
  }

  function clearData() {
    satisfyRateData.today.satisfy = [];
    satisfyRateData.today.noSatisfy = [];
    satisfyRateData.today.general = [];
    satisfyRateData.together.satisfy = [];
    satisfyRateData.together.noSatisfy = [];
    satisfyRateData.together.general = [];
    satisfyRateData.branch.satisfy = [];
    satisfyRateData.branch.noSatisfy = [];
    satisfyRateData.branch.general = [];
    satisfyRateData.total.satisfy = [];
    satisfyRateData.total.noSatisfy = [];
    satisfyRateData.total.general = [];
    satisfyRateData.satisfyRate = [];

    lastoption.series.data = ["0", "0", "0", "0", "0", "0", "0", "0", "0", "0"];
    rightCentenOption.series[0].data = [
      "0",
      "0",
      "0",
      "0",
      "0",
      "0",
      "0",
      "0",
      "0",
      "0",
    ];
    rightCentenOption.series[1].data = [
      "0",
      "0",
      "0",
      "0",
      "0",
      "0",
      "0",
      "0",
      "0",
      "0",
    ];
    rightCentenOption.series[2].data = [
      "0",
      "0",
      "0",
      "0",
      "0",
      "0",
      "0",
      "0",
      "0",
      "0",
    ];
  }

  function getDetailSatisfy(data) {
    // provinceSatisfy.value.lastSatisfy = toPercent(data.lastSatisfy)
    // provinceSatisfy.value.decemberSatisfy = toPercent(data.decemberSatisfy)
    // provinceSatisfy.value.allRate = toPercent(data.allRate)
    // provinceSatisfy.value.lastCompare = toPercent(data.compareLast)
    // provinceSatisfy.value.decemberCompare = toPercent(data.compareDecember)
    console.log("getDetailSatisfy", data);
    satisfyRateData.today.satisfy = [];
    satisfyRateData.today.noSatisfy = [];
    satisfyRateData.today.general = [];
    satisfyRateData.together.satisfy = [];
    satisfyRateData.together.noSatisfy = [];
    satisfyRateData.together.general = [];
    satisfyRateData.branch.satisfy = [];
    satisfyRateData.branch.noSatisfy = [];
    satisfyRateData.branch.general = [];
    satisfyRateData.total.satisfy = [];
    satisfyRateData.total.noSatisfy = [];
    satisfyRateData.total.general = [];
    satisfyRateData.satisfyRate = [];
    let dateArr = [];
    // 取出全省的值, 时间戳  ->  日期
    data.filter((item) => {
      // console.log("item.name", item.name, cityName);

      if (cityName === "天门市" || cityName === "仙桃市" || cityName === "潜江市") {
        cityName = "江汉市";
      }
      if (cityName === "恩施土家族苗族自治州") {
        cityName = "恩施市";
      }

      if (item.name + "市" === cityName) {
        item.cdate = timestampToDate(item.cdate, 5);
        console.log("===", item);
        dateArr.push(item.cdate);
        satisfyRateData.today.satisfy.push(item.todaySatisfy);
        satisfyRateData.today.noSatisfy.push(item.todayNosatisfy);
        satisfyRateData.today.general.push(item.todayGeneral);
        satisfyRateData.together.satisfy.push(item.togetherSatisfy);
        satisfyRateData.together.noSatisfy.push(item.togetherNosatisfy);
        satisfyRateData.together.general.push(item.togetherGeneral);
        satisfyRateData.branch.satisfy.push(item.branchSatisfy);
        satisfyRateData.branch.noSatisfy.push(item.branchNosatisfy);
        satisfyRateData.branch.general.push(item.branchGeneral);
        satisfyRateData.total.satisfy.push(item.allSatisfy);
        satisfyRateData.total.noSatisfy.push(item.allNosatisfy);
        satisfyRateData.total.general.push(item.allGeneral);
        satisfyRateData.satisfyRate.push((Number(item.allRate) * 100).toFixed(2));
      }
    });
    modioLine.xAxis.data = getRecentData(dateArr).reverse();
    satisfyRateData.today.satisfy = getDetailSa(satisfyRateData.today.satisfy);
    satisfyRateData.today.noSatisfy = getDetailSa(
      satisfyRateData.today.noSatisfy
    );
    satisfyRateData.today.general = getDetailSa(satisfyRateData.today.general);
    satisfyRateData.together.satisfy = getDetailSa(
      satisfyRateData.together.satisfy
    );
    satisfyRateData.together.noSatisfy = getDetailSa(
      satisfyRateData.together.noSatisfy
    );
    satisfyRateData.together.general = getDetailSa(
      satisfyRateData.together.general
    );
    satisfyRateData.branch.satisfy = getDetailSa(satisfyRateData.branch.satisfy);
    satisfyRateData.branch.noSatisfy = getDetailSa(
      satisfyRateData.branch.noSatisfy
    );
    satisfyRateData.branch.general = getDetailSa(satisfyRateData.branch.general);
    satisfyRateData.total.satisfy = getDetailSa(satisfyRateData.total.satisfy);
    satisfyRateData.total.noSatisfy = getDetailSa(
      satisfyRateData.total.noSatisfy
    );
    satisfyRateData.total.general = getDetailSa(satisfyRateData.total.general);
    satisfyRateData.satisfyRate = getDetailSa(satisfyRateData.satisfyRate);
    chooseSatisfyRate(document.getElementsByClassName("choice")[0].id);
    console.log('document.getElementsByClassName("choice")[0].id', document.getElementsByClassName("choice")[0].id)
  }

  function chooseSatisfyRate(radioVal) {
    console.log("radioVal", radioVal);
    // const chooseSatisfyRate = (radioVal) => {
    if (radioVal === "satisfyRate") {
      modioLine.series[0].data = satisfyRateData[radioVal];
      modioLine.series[1].data = [];
      modioLine.series[2].data = [];
    } else {
      modioLine.series[0].data = satisfyRateData[radioVal].satisfy;
      modioLine.series[1].data = satisfyRateData[radioVal].noSatisfy;
      modioLine.series[2].data = satisfyRateData[radioVal].general;
    }
    console.log(
      "satisfyRateData",
      modioLine.series[0].data,
      satisfyRateData[radioVal].satisfy
    );
    // complainList.push(satisfyRateData)
  }

  // 投诉工单率序值定比趋势数据
  function getProvinceComplainTrend(data) {
    let dateArr = [];
    let baseArr = [];
    let targetArr = [];
    let finishArr = [];
    let compareArr = [];
    // 取出全省的值, 时间戳  ->  日期
    data.filter((item) => {
      if (cityName == "天门市" || cityName == "仙桃市" || cityName == "潜江市") {
        cityName = "江汉市";
      }
      if (cityName == "恩施土家族苗族自治州") {
        cityName = "恩施市";
      }
      if (item.name + "市" === cityName) {
        item.cdate = timestampToDate(item.cdate, 5);
        dateArr.push(item.cdate);
        compareArr.push((Number(item.compare) * 100).toFixed(2));
        baseArr.push(Number(item.base).toFixed(2));
        targetArr.push(Number(item.target).toFixed(2));
        finishArr.push(Number(item.finish).toFixed(2));
      }
    });
    lastoption.xAxis[0].data = getDetailData(dateArr);
    lastoption.series.data = getDetailData(compareArr);
    // rightCentenOption.xAxis.data = getRecentData(dateArr);
    rightCentenOption.xAxis.data = dateArr;
    rightCentenOption.series[0].data = getDetailData(baseArr);
    // rightCentenOption.series[0].data[5] = 10
    rightCentenOption.series[1].data = getDetailData(targetArr);
    rightCentenOption.series[2].data = getDetailData(finishArr);
    console.log("rightCentenOption", rightCentenOption);
  }

  /*
		echarts@v5.2.2 和 echarts-gl@v2.0.8 组合创建的江苏省地图中在每
		个地级市区域无法触发click事件，但是每个地级市中的柱状图可以触发cl
		ick事件，如果采用如下方式不使用geo3D而是使用map3D绘制江苏省地图，
		可以在每个地级市区
		域触发click事件：
		*/

  //导入配置
  const options = {
    backgroundColor: "#001C31",
    // tooltip,
    series: [geo],
  };

  import hubei from "../assets/map/hubei"; //湖北省地图json文件

  //重绘图表函数
  const resizeHandler = () => {
    echart.resize();
  };
  //设置防抖，保证无论拖动窗口大小，只执行一次获取浏览器宽高的方法
  const debounce = (fun, delay) => {
    let timer;
    return function () {
      if (timer) {
        clearTimeout(timer);
      }
      timer = setTimeout(() => {
        fun();
      }, delay);
    };
  };
  const cancalDebounce = debounce(resizeHandler, 500);
  //页面成功渲染，开始绘制图表

  // 声明
  var echart = null;

  // 创建画布
  function createMap() {
    // echart = echarts.init(document.getElementsByClassName("echrtsMap")[0], {
    //   width: document.documentElement.clientWidth,
    //   height: document.documentElement.clientHeight,
    // });
    echart = echarts.init(document.getElementsByClassName(eChart.value)[0], {
      width: document.documentElement.clientWidth,
      height: document.documentElement.clientHeight,
    });
    echarts.registerMap("湖北", hubei);
    // options.series[0].data = convertData(data);
    echart.setOption(options);
    echart.on("click", function (params) {
      if (params.componentType === "series") {
        let provinceName = params.name;
        // getPageData({ beginCDate: begin.value, endCDate: end.value, p:params });
        getDom(params);
        // lastoptionChartTab()
      }
      flag = true;
    });
  }

  //点击任意位置关闭区域弹窗  除开echrtsMap地图和chartLabel弹窗
  document.addEventListener("click", (e) => {
    // //获取弹窗对象
    const userCon = document.getElementsByClassName("chartLabel")[0];
    const parentMap = document.getElementsByClassName("echrtsMap")[0];
    //判断弹窗对象中是否包含点击对象
    if (
      userCon &&
      !userCon.contains(e.target) &&
      !parentMap.contains(e.target) &&
      flag
    ) {
      //如果不包含则删除
      userCon.remove();
      flag = false;
    }
  });

  const statu = ref("1");

  const chartChange = () => {
    if (document.getElementsByClassName("changeChart")[0]) {
      document.getElementsByClassName("changeChart")[0].onclick = () => {
        // if(document.getElementsByClassName("modioLineChart")[0].style.display=="flex"){
        if (statu.value === "1") {
          document.getElementsByClassName("modioLineChart")[0].style.display =
            "none";
          document.getElementsByClassName("lastoptionChart")[0].style.display =
            "flex";
          console.log("rightCentenOption00", rightCentenOption);
          statu.value = "2";
          document.getElementsByClassName("changeChart")[0].innerHTML =
            "查看投诉率";
          mychartLife.clear();
          mychartLife.setOption(rightCentenOption);
        } else {
          document.getElementsByClassName("modioLineChart")[0].style.display =
            "flex";
          document.getElementsByClassName("lastoptionChart")[0].style.display =
            "none";
          statu.value = "1";
          document.getElementsByClassName("changeChart")[0].innerHTML =
            "查看工单率";
          mychartLife.clear();
          mychartLife.setOption(modioLine);
        }

        // lastoptionChartTab()
      };
    }
  };
  const lastoptionChartTab = () => {
    if (document.getElementsByClassName("lastoptionChartBt")) {
      for (
        let i = 0;
        i < document.getElementsByClassName("lastoptionChartBt").length;
        i++
      ) {
        document.getElementsByClassName("lastoptionChartBt")[i].onclick =
          function () {
            for (
              let j = 0;
              j < document.getElementsByClassName("lastoptionChartBt").length;
              j++
            ) {
              document
                .getElementsByClassName("lastoptionChartBt")
                [j].classList.remove("choices");
              document.getElementsByClassName("lastoptionChartBt")[
                j
                ].style.border = "1px solid #BDBDBD";
              document.getElementsByClassName("lastoptionChartBt")[
                j
                ].style.color = "#CDCDCD";
            }
            document
              .getElementsByClassName("lastoptionChartBt")
              [i].classList.add("choices");

            document.getElementsByClassName("choices")[0].style.border =
              "1px solid rgba(20, 158, 236, 0.8)";
            document.getElementsByClassName("choices")[0].style.color = "#149EEC";
            if (
              document.getElementsByClassName("choices")[0].id == "lastoption"
            ) {
              console.log("lastoption", lastoption);
              // rightCentenOption.series=[]
              mychartLife.clear();
              mychartLife.setOption(lastoption);
            } else if (
              document.getElementsByClassName("choices")[0].id ==
              "rightCentenOption"
            ) {
              console.log("rightCentenOption", rightCentenOption);
              mychartLife.clear();
              mychartLife.setOption(rightCentenOption);
            }
          };
      }
    }
  };

  const tabChange = () => {
    if (document.getElementsByClassName("chartButton")) {
      for (
        let i = 0;
        i < document.getElementsByClassName("chartButton").length;
        i++
      ) {
        document.getElementsByClassName("chartButton")[i].onclick = function () {
          for (
            let j = 0;
            j < document.getElementsByClassName("chartButton").length;
            j++
          ) {
            document
              .getElementsByClassName("chartButton")
              [j].classList.remove("choice");
            document.getElementsByClassName("chartButton")[j].style.border =
              "1px solid #BDBDBD";
            document.getElementsByClassName("chartButton")[j].style.color =
              "#CDCDCD";
          }
          document
            .getElementsByClassName("chartButton")
            [i].classList.add("choice");

          getPageData({beginCDate: begin.value, endCDate: end.value});

          document.getElementsByClassName("choice")[0].style.border =
            "1px solid rgba(20, 158, 236, 0.8)";
          document.getElementsByClassName("choice")[0].style.color = "#149EEC";
        };
      }
    }
  };

  const seValue = [
    // {
    //   value: "一月",
    //   label: "一月",
    // },
    // {
    //   value: "二月",
    //   label: "二月",
    // },
    {
      value: "三月",
      label: "三月",
    },
    {
      value: "四月",
      label: "四月",
    },
    {
      value: "五月",
      label: "五月",
    },
    // {
    //   value: "六月",
    //   label: "六月",
    // },
  ];

  onMounted(() => {
    createMap();
    if (document.body.style.zoom != "") {
      zoom.value = 1 / document.body.style.zoom;
    } else {
      zoom.value = 1;
    }

    window.addEventListener("resize", () => {
      zoom.value = 1;
      console.log(1 / zoom.value);
      cancalDebounce();
    });
  });
</script>
<style lang='less' scoped>
	.maps {
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
		justify-content: space-between;

		.selectMap {
			display: flex;
			justify-content: center;

			/deep/ .el-select {
				width: 220px;
			}

			/deep/ .el-select {
				background: transparent;
			}

			/deep/ .el-input__wrapper {
				border-radius: 0;
				--el-input-inner-height: none;
				background: url("../assets/iconBorder/Slice 15.png");
				background-repeat: no-repeat;
				box-shadow: none;
			}

			/deep/ .el-input__inner {
				text-align: center;
				--el-input-placeholder-text: 16px;
				--el-input-placeholder-color: #ffffff;
				--el-input-placeholder-width: 100px;
			}
		}

		.echrtsMap {
			width: 100%;
			height: 100%;
			/*min-width: 700px;*/
			/*min-height: 400px;*/
		}
	}
</style>
<style>
	.el-select {
		width: 150px;
		float: right;
	}

	.el-select {
		background: transparent;
	}

	.el-input__wrapper {
		background: #004064;
		box-shadow: none;
	}

	.el-input__inner {
		text-align: center;
		font-size: 14px;
		--el-input-placeholder-text: 14px;
		--el-input-placeholder-color: #d6e3ea;
	}

	.el-pagination {
		background-color: transparent;
	}

	.el-scrollbar {
		background: #01233c;
	}

	.el-popper {
		/* background: transparent !important; */
		border: 1px solid #185481 !important;
		/* border: none !important; */
	}

	.el-select-dropdown__item.hover {
		background: #028cda !important;
	}

	.el-select-dropdown__item {
		color: #d6e3ea;
	}
</style>
